<template>
  <view>
    <image class="bg" :src="appImgs.bg_1" mode="aspectFill"></image>
    <view class="box">
      <view class="h-flex-y h-flex-center">
        <view style="padding-top: 150rpx">
          <image src="/static/imgs/ico.jpeg" mode="aspectFill" class="ico"></image>
        </view>
        <view style="margin: 100rpx 0 30rpx 0; width: 100%; text-align: center">
          <view v-if="userInfo._id">
            已闯过<text style="padding: 0 10rpx; color: #ff5722">{{
      userInfo.pass
    }}</text>关
          </view>
        </view>
        <image :src="appImgs.btn_3" mode="aspectFit" @tap="startGame" class="start transform-scale"></image>
        <view style="margin-top: 60rpx" class="h-flex-x">
          <image :src="appImgs.btn_1" mode="aspectFit" @tap="lookTop" class="start transform-scale"></image>
        </view>
      </view>
    </view>

    <view class="global-popup signIn-pop" :style="{ display: signIn.show ? 'block' : 'none' }">
      <view class="shade"></view>
      <view class="content">
        <image :src="appImgs.img_2" mode="aspectFit"></image>
        <view>
          <view class="h-flex-x h-flex-center" style="margin-bottom: 100rpx">
            <view>
              <image class="gold" :src="appImgs.icon_1" mode="aspectFit"></image>
            </view>
            <view style="margin: 0 0 0 10rpx; color: #ff5722; font-size: 48rpx">+</view>
            <view style="color: #ff5722; font-size: 64rpx">20</view>
          </view>
          <image class="btn transform-scale" :src="appImgs.btn_8" mode="aspectFit" @tap="onSignIn"></image>
        </view>
      </view>
    </view>
    <cui-userprofiledialog ref="userProfileDialog" paddingBottom="92rpx"></cui-userprofiledialog>
  </view>
</template>

<script>
import {
  login,
	getUserInfo,
  signInfo,
  getUserJb,
  updataUser
} from "@/api/user/index.js";
import store from "@/store/index.js";
export default {
  components: {},
  data() {
    return {
      userInfo: {},
      signIn: {
        show: false,
      },
      appImgs: {},
    };
  },
  onLoad() {
    this.appImgs = uni.$hl.getAppImgs();
  },
  // onShow() {
  //   if (uni.$hl.isLogin()) {
  //     this.userInfo = JSON.parse(uni.$hl.getUserInfoData());
  //     this.updateInfo();
  //   }
  // },
  methods: {
    // 开始游戏
    startGame() {
      if (uni.getStorageSync('userInfo')) {
        this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
        this.updateInfo();
      } else {
       this.tapGetUserProfile();
      }

    },
    tapGetUserProfile() {
      if (uni.getStorageSync("avatarUrl") && uni.getStorageSync("nickName")) {
        this.toLogin()
      } else {
        this.$refs["userProfileDialog"].show({
          desc: "用于显示个人资料",
          avatarUrl: {
            requried: true, // 是否必填
            disable: false, // 是否隐藏
          },
          nickName: {
            requried: true, // 是否必填
            disable: false, // 是否隐藏
          }
        }).then(res => {
          uni.setStorageSync('avatarUrl', res.avatarUrl);
          uni.setStorageSync('nickName', res.nickName);
          this.toLogin()
        }, err => {
          console.log("取消")
        });
      }
    },
    toLogin() {
      uni.login({
        provider: "weixin",
        onlyAuthorize: true,
        success: (re) => {
          var postData = {
            clientId: "d445a0db7cb73f2ecd24da4812aced41",
            grantType: "xcx",
            tenantId: "000000",
            xcxCode: re.code,
          };
          var useData = {
            avatar: uni.getStorageSync("avatarUrl"),
            nickName: uni.getStorageSync("nickName"),
            sex: "1",
          };
          login(postData).then((res) => {
            uni.$hl.showLoading("自动登录中");
            if (res.code == 200) {
              store.commit("setToken", res.data.access_token);
              uni.setStorageSync(
                "token",
                res.data.access_token
              );
              store.commit("setClientId", res.data.client_id);
              uni.setStorageSync(
                "clientId",
                res.data.client_id
              );
              updataUser(useData).then((res) => {
                if (res.code == 200) {
                  var getData = {
                    tenantId: "000000",
                    clientId: uni.getStorageSync("clientId"),
                  };
                  getUserInfo(getData).then((res) => {
                    if (res.code == 200) {
                      this.userInfo = res.data.user;
                      uni.hideLoading();
                      getUserJb().then((res) => {
                        this.userInfo.gold = res.data.money;
                        this.userInfo.pass = res.data.pass;
                        this.userInfo.sign = res.data.sign;
                        uni.$hl.setUserInfo(this.userInfo);
                        uni.setStorageSync("userInfo", JSON.stringify(this.userInfo))
                        uni.$hl.showToast("登录成功", "success");
                        uni.navigateTo({
                          url: "/pages/index/play",
                        });
                      });
                    } else {
                      uni.hideLoading();
                      uni.$hl.showToast("登录失败，请重试");
                    }
                  });
                }
              })

            } else {
              uni.hideLoading();
              uni.$hl.showToast("登录失败，请重试");
            }
          });
        },
        fail: (err) => {
          uni.hideLoading();
          console.log(err);
          uni.showToast({
            title: "微信登录授权失败",
            icon: "none",
          });
        },
      });
    },
    // 排行榜
    lookTop() {
      uni.navigateTo({
        url: "/pages/index/top",
      });
    },
    updateInfo() {
      getUserJb().then((res) => {
        if (res.code == 200) {
          console.log(this.userInfo.gold);
          this.userInfo.gold = res.data.money;
          this.userInfo.pass = res.data.pass;
          this.userInfo.sign = res.data.sign;
          uni.$hl.setUserInfo(this.userInfo);
          if (res.data.sign === 0) {
            this.signInFn();
          } else {
            uni.hideLoading();
            uni.$hl.showToast("登录成功", "success");
            setTimeout(() => {
              uni.navigateTo({
                url: "/pages/index/play",
              });
            }, 1500);
          }
        } else {
          uni.$hl.showToast("登录失败，请重试");
        }
      });
    },

    signInFn(type = "verify") {
      if (type == "verify") {
        this.signIn.show = true;
      }
      if (type == "signIn") {
        this.signIn.show = false;
        signInfo().then((res) => {
          uni.$hl.showToast("领取成功", "success");
          this.userInfo.gold = Number(this.userInfo.gold) + 20
          setTimeout(() => {
            uni.hideLoading();
            uni.navigateTo({
              url: "/pages/index/play",
            });
          }, 1500);
        });
      }
    },
    onSignIn() {
      uni.$hl.showLoading("领取中");
      this.signInFn("signIn");
    },
  },
};
</script>

<style lang="scss">
.bg {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.box {
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-top: var(--status-bar-height);

  .ico {
    display: block;
    width: 320rpx;
    height: 320rpx;
    border-radius: 60rpx;
  }

  >view {
    height: 100%;
  }

  .start {
    display: block;
    width: 320rpx;
    height: 90rpx;
    margin: 0 10rpx;
  }
}

// 签到
.signIn-pop {
  .content {
    width: 750rpx;
    height: 900rpx;

    >image {
      width: 100%;
      height: 100%;
    }

    >view {
      position: absolute;
      top: 500rpx;
      left: 20%;
      width: 60%;
      font-size: 32rpx;
      color: #345;
    }

    .gold {
      width: 40rpx;
      height: 40rpx;
    }

    .btn {
      width: 320rpx;
      height: 90rpx;
      margin: 20rpx auto 0 auto;
    }
  }
}
</style>
